/// <reference path="./BDMap.d.ts"/>
import React, { Component } from 'react';
import { Case } from '../../entity/CaseEntiy';
import CaseStore from '../../stores/CaseStore';
import './BDMap.scss';

interface BDMapProps {
  apiToken?: string;
  containerId?: string;
  afterInit?: (map: CustomMap) => void;
  inputId?: string;
  city?: string;
  caseStore?: CaseStore;
  listenClick?: () => void;
}

interface BDMapState {
  error: Error | null;
  zoom: number;
}

export interface CustomMap {
  initMass: (dataList: Case[]) => void;
  removeMass: () => void;
  reset: () => void;
}

// 地图组件
export default class BDMap extends Component<BDMapProps, BDMapState> {
  static defaultProps: BDMapProps = {
    apiToken: 'zkLu1dVwPFyEBPmBQzGBdYwH',
    containerId: 'map-container',
    city: '南京'
  };

  state = {
    error: null,
    zoom: 15
  };

  _map: Object;

  componentDidMount() {
    if (!!window.BMap) {
      const map: CustomMap = this.initMap();
      if (!!this.props.afterInit) {
        this.props.afterInit(map);
      }
    } else {
      this.setState({
        error: new Error('地图加载失败')
      });
    }
  }

  // 初始化地图
  initMap(): CustomMap {
    const { containerId, city } = this.props;
    const BMap = window.BMap;
    const point = new BMap.Point(118.78, 32.04);

    // 实例化地图对象 
    const map = this._map = new window.BMap.Map(containerId!);
    map.centerAndZoom(
      point,
      this.state.zoom
    );
    map.enableDragging();
    map.enableDoubleClickZoom();
    map.enablePinchToZoom();
    const initMass = (dataList: Array<Case>) => {
      const BdMap = window.BMap;
      let points: Point[] = new Array();
      dataList.forEach((v: Case, i: number) => {
        let curPoint = new BdMap.Point(v.location.lng, v.location.lat);
        points.push(curPoint);
      });
      let pointCollection = new BdMap.PointCollection
        (points, { shape: window.BMAP_POINT_SHAPE_WATERDROP, size: window.BMAP_POINT_SIZE_HUGE });
      map.addOverlay(pointCollection);
      pointCollection.addEventListener('click', (e: PointCollectionCbType) => {
        dataList.forEach((v: Case, i: number) => {
          if (e.point.lat !== v.location.lat || e.point.lng !== v.location.lng) {
            return;
          }
          const thePoint = points[i];
          let opts = {
            width: 200, // 信息窗口宽度
            height: 70, // 信息窗口高度
            title: v.category[0], // 信息窗口标题
          };
          let id = v.uuid;
          let name = v.caller;
          let type = v.type;
          const infoWindow =
            new BMap.InfoWindow(
              '工单号:' + id + '<br/>诉求人:' + name + ' 种类:' + type, opts);
          infoWindow.enableMaximize();
          infoWindow.enableCloseOnClick();
          infoWindow.addEventListener('maximize', () => {
            this.props.listenClick!();
          })
          map.openInfoWindow(infoWindow, thePoint);

        });
      });

    };

    const removeMass = () => {
      map.clearOverlays();
      map.centerAndZoom(
        city!,
        this.state.zoom
      );
    };
    const reset = () => {
      map.clearOverlays();
      map.reset();
    };

    return {
      initMass,
      removeMass,
      reset
    };
  }

  render(): JSX.Element {
    // 抛出错误, 留给最外层捕获 
    if (this.state.error) {
      throw this.state.error;
    }
    return <div id={this.props.containerId} className="bd-map-container" />;
  }
}